<template>
  <el-container class="home">
    <!-- 侧边栏 -->
    <el-aside width="150px" class="navi-bar" style="background-color: #111827">
      <div class="home-portrait">
        <!-- <img src="@/assets/common/portrait.jpeg" alt="cloud" class="menu-img" /> -->
        <head-image :name="name"
          :url="url" :size="60" :width="100" :height="100" :radius="radius" @click="openSettingDialog">
        </head-image>

      </div>
      <el-menu default-active="1" class="" @open="handleOpen" @close="handleClose" background-color="#111827"
        text-color="#8b93a1" active-text-color="#fff">
        <el-menu-item index="1">
          <router-link class="meun-center" v-bind:to="'/home/chat'">
            <img src="@/assets/icon/info.svg" alt="cloud" class="menu-icon" />
            <!-- <svg-icon name="home" :size="48" color="blue"></svg-icon> -->
            <span class="menu-title">消息</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="2">
          <router-link class="meun-center" v-bind:to="'/home/friends'">
            <img src="@/assets/icon/list.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">通讯录</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="3">
          <router-link class="meun-center" v-bind:to="'/home/published'">
            <img src="@/assets/icon/published.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">已发文</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="4">
          <router-link class="meun-center" v-bind:to="'/home/received'">
            <img src="@/assets/icon/received.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">已收文</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="5">
          <router-link class="meun-center" v-bind:to="'/home/cloud'">
            <img src="@/assets/icon/cloud.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">云文件</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="6">
          <router-link class="meun-center" v-bind:to="'/home/collection'">
            <img src="@/assets/icon/collection.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">收藏</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="7">
          <router-link class="meun-center" v-bind:to="'/home/settine'">
            <img src="@/assets/icon/settine.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">设置</span>
          </router-link>
        </el-menu-item>
        <el-menu-item index="8">
          <div class="meun-center" @click="handleLogout">
            <img src="@/assets/icon/exit.svg" alt="cloud" class="menu-icon" />
            <span class="menu-title">退出</span>
          </div>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 内容 -->
    <el-container>
      <router-view></router-view>
    </el-container>
  </el-container>
</template>

<script>
import HeadImage from "@/components/HeadImage.vue";

// import SvgIcon from '@/components/SvgIcon.vue'
import { MessageBox } from 'element-ui';
export default {
  name: 'HomeView',
  components: {
    HeadImage,
    // 	RightMenu
  },
  data () {
    return {
      radius:"0%",
      name:sessionStorage.getItem('userPin'),
      url:'',
      token: sessionStorage.getItem('token'),
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    // 退出方法
    handleLogout () {
      // 弹出确认框
      MessageBox.confirm('确定要退出登录吗?', '确认退出', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清除 sessionStorage 中的 token 和 expireTime
        sessionStorage.removeItem('token');
        sessionStorage.removeItem('expireTime');

        // 重定向到登录页面
        this.$router.push({ path: '/' });  // 跳转到登录页面或首页
      }).catch(() => {
        // 如果用户点击取消，不做任何操作
        console.log('取消退出');
      });
    },
    async init () {
      this.$store.dispatch('fetchChatMessages', this.token);
      this.$wsApi.connect(this.token)
      this.$wsApi.onMessage((data) => {
        console.log(data);
        if (data.notifyType === 'ChatSessionRecord') {
          // 调用 Vuex action 来处理 WebSocket 消息
          this.$store.dispatch('handleWebSocketMessage', data);
        }
        if (data.msg === 'token为空！') {
          this.$router.push({ path: '/' });

        }
      })
      this.$store.dispatch('publishedMessage', this.token);
      this.$store.dispatch('receiveMessage', this.token);


    },
    openSettingDialog () {
      this.showSettingDialog = true;
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-menu-item {
  height: 90px;
}

::v-deep.el-aside {
  overflow: hidden;
}

::v-deep.el-menu {
  border-right: 0px;
}

::v-deep .menu-icon {
  font-size: 40px;
  width: 30px;
  height: 30px;
  color: red;
}

.home {
  height: 100%;
}

.navi-bar {
  padding-top: 20px;
}

.home-portrait {
  height: 160px;
  padding: 30px 25px;
  display: flex;
  justify-content: center;
  align-items: center;

  .menu-img {
    width: 100%;
    height: 100%;
  }
}

.meun-center {
  display: flex;
  /* 启用flexbox布局 */
  flex-direction: column;
  /* 元素排列方向为垂直 */
  justify-content: center;
  /* 在主轴（垂直方向）上居中 */
  align-items: center;
  /* 在交叉轴（水平方向）上居中 */
  height: 100px;
}

.menu-title {
  display: block;
}
</style>